<template>
  <div>
    <el-table
      ref="singleTable"
      :data="cutObj.records"
      highlight-current-row
      @current-change="handleCurrentChange"
      @row-click="handleTableRow"
      style="
        width: 718px;
        height: 220px;
        border: 1px solid #dcdfe6;
        margin: 100px;
      "
    >
      <el-table-column property="eventId" width="50"> </el-table-column>
      <el-table-column property="eventName" label="事件名称" width="120">
      </el-table-column>
      <el-table-column property="eventDay" label="事件日期" width="120">
      </el-table-column>
      <el-table-column property="regionName" label="发生位置" width="120">
      </el-table-column>
      <el-table-column property="eventPrecept" label="防治方案" width="120">
      </el-table-column>
      <el-table-column property="eventStage" label="灾情状态" width="180">
      </el-table-column>
    </el-table>

    <div class="check">
      <div>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="cutObj.pages * 10"
          @current-change="handleChange"
          @click="get()"
          style="margin-left: 100px; margin-bottom: 100px"
        >
        </el-pagination>

        <div style="margin: 20px 60px">
          <el-button @click="addevent()">添加事件</el-button>
          <el-button @click="geteventById(eventId)">查看事件详细信息</el-button>

          <br />
          <div style="margin-top: 20px">
            <el-button @click="update(eventId)">申请专家会审</el-button>
            <el-button @click="updatemsg(eventId)">修改事件信息</el-button>
          </div>
        </div>
      </div>
      <div>
        <div>
          <fieldset style="width: 280px">
            <legend>事件查询</legend>
            <form action="">
              事件名称:<input
                type="text"
                v-model="eventName"
                style="margin: 20px"
              />
              <br />
              灾情状态:<input
                type="text"
                v-model="eventStage"
                style="margin: 20px"
              />
              <br />
              发生位置:<input
                type="text"
                v-model="regionName"
                style="margin: 20px"
              />
              <br />
              起始日期：<input type="date" name="" id="" v-model="startDate" />
              <br />
              结束日期：<input
                type="date"
                name=""
                id=""
                style="margin-top: 20px"
                v-model="endDate"
              />
              <br />
              <input
                type="button"
                value="查询"
                @click="get()"
                style="margin-left: 80px; margin-top: 10px"
              />
            </form>
          </fieldset>
        </div>
      </div>
    </div>

    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="600px"
      :before-close="handleClose"
    >
      <h1 style="text-align: center">事件详细信息</h1>
      <div class="msg" style="display: flex">
        <div style="width: 300px">
          <p style="margin: 80px 30px">事件名称：{{ eventList.eventName }}</p>
          <p style="margin: 80px 30px">时间： {{ eventList.eventDay }}</p>
          <p style="margin: 80px 30px">灾情阶段：{{ eventList.eventStage }}</p>
          <p style="margin: 80px 30px">
            灾情描述：{{ eventList.eventDescribe }}
          </p>
          <p style="margin: 80px 30px">灾害类型：{{ eventList.eventType }}</p>
          <p style="margin: 80px 30px">初步损失：{{ eventList.eventLose }}</p>
          <p style="margin: 80px 30px">专家建议：{{ eventList.eventAdvice }}</p>
        </div>
        <div style="width: 300px">
          <p style="margin: 50px 30px">
            灾区图片：
            <img
              :src="'/api' + eventList.eventImg"
              alt="哦豁，图片找不到---瓜了"
              style="width: 220px"
            />
          </p>
          <p style="margin: 50px 30px">发现途径：{{ eventList.eventFind }}</p>
          <p style="margin: 50px 30px">发生位置： {{ eventList.regionName }}</p>
          <p style="margin: 50px 30px">所在小班：{{ eventList.className }}</p>
          <p style="margin: 50px 30px">影响面积：{{ eventList.eventArea }}</p>
          <p style="margin: 50px 30px">
            防治方案：{{ eventList.eventPrecept }}
          </p>
        </div>

      </div>

      <div>
          <el-table
            ref="singleTable"
            :data="consultBeanList"
            highlight-current-row
            @current-change="handleCurrentChange"
            @row-click="handleTableRow"
            style="
              width: 420px;
              height: 223px;
              border: 1px solid #dcdfe6;
              margin: 0px auto;
            "
          >
            <el-table-column property="consultId" width="50"> </el-table-column>
            <el-table-column property="consultDay" label="事件名称" width="120">
            </el-table-column>
            <el-table-column property="consultPeople" label="事件日期" width="120">
            </el-table-column>
            <el-table-column property="consultResult" label="发生位置" width="120">
            </el-table-column>

          </el-table>
        </div>

      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="dialogVisible = false"
          style="margin-right: 240px; margin-bottom: 50px"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title=""
      :visible.sync="dialog"
      width="600px"
      :before-close="handleClose"
    >
      <h1 style="text-align: center">添加事件信息</h1>
      <div class="msg" style="display: flex">
        <div style="width: 300px">
          <p style="margin: 50px 30px">
            事件名称：<input type="text" v-model="eventName" />
          </p>
          <p style="margin: 50px 30px">
            时间：<input type="date" v-model="eventDay" />
          </p>
          <p style="margin: 50px 30px">
            灾情阶段：
            <select v-model="eventStage">
              <option>已得到控制</option>
              <option>防治中</option>
              <option>无法解决，申请专家会商</option>
            </select>
          </p>
          <p style="margin: 50px 30px">
            灾情描述：<input type="text" v-model="eventDescribe" />
          </p>

          <p style="margin: 50px 30px">
            发生位置：
            <el-select v-model="regionName" placeholder="请选择">
              <el-option
                v-for="item in this.ClassList"
                :key="item.className"
                :label="item.className"
                :value="item.className"
              >
              </el-option>
            </el-select>
          </p>

          <p style="margin: 50px 30px">
            初步损失：<input type="text" v-model="eventLose" />
          </p>
          <p style="margin: 50px 30px">
            防治方案：<input type="text" v-model="eventPrecept" />
          </p>
        </div>
        <div style="width: 300px">
          <p style="margin: 50px 30px">
            灾区图片：
            <el-upload
              class="avatar-uploader"
              action="/api/up/upload"
              :http-request="testUpload"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="imageUrl"
                :src="imageUrl"
                class="avatar"
                style="width: 50px; height: 50px"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </p>
          <p style="margin: 50px 30px">
            灾害类型：
            <select v-model="eventType">
              <option>鼠害</option>
              <option>虫害</option>
              <option>病害</option>
            </select>
          </p>
          <p style="margin: 50px 30px">
            发现途径：
            <select v-model="eventFind">
              <option>小班巡查发现</option>
              <option>公众发现</option>
              <option>上级部门通报</option>
            </select>
          </p>
          <p style="margin: 50px 30px">
            所在小班：<input type="text" v-model="className" />
            <span>{{eventList.className}}</span>
          </p>
          <p style="margin: 50px 30px">
            影响面积：<input type="text" v-model="eventArea" />
          </p>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title=""
      :visible.sync="dia"
      width="600px"
      :before-close="handleClose"
    >
      <h1 style="text-align: center">修改事件详细信息</h1>
      <div class="msg" style="display: flex">
        <div style="width: 300px">
          <p style="margin: 80px 30px">事件名称：{{ eventList.eventName }}</p>
          <p style="margin: 80px 30px">时间： {{ eventList.eventDay }}</p>
          <p style="margin: 80px 30px">
            灾情阶段：
            <select v-model="eventStage">
              <option>已得到控制</option>
              <option>防治中</option>
              <option>无法解决，申请专家会商</option>
            </select>
          </p>
          <p style="margin: 80px 30px">
            灾情描述：{{ eventList.eventDescribe }}
          </p>
          <p style="margin: 80px 30px">灾害类型：{{ eventList.eventType }}</p>
          <p style="margin: 80px 30px">初步损失：{{ eventList.eventLose }}</p>
          <p style="margin: 80px 30px">专家建议：{{ eventList.eventAdvice }}</p>
        </div>
        <div style="width: 300px">
          <p style="margin: 50px 30px">
            灾区图片：
            <img
              :src="'/api' + eventList.eventImg"
              alt="哦豁，图片找不到---瓜了"
              style="width: 220px"
            />
          </p>
          <p style="margin: 50px 30px">发现途径：{{ eventList.eventFind }}</p>
          <p style="margin: 50px 30px">发生位置： {{ eventList.regionName }}</p>
          <p style="margin: 50px 30px">所在小班：{{ eventList.className }}</p>
          <p style="margin: 50px 30px">影响面积：{{ eventList.eventArea }}</p>
          <p style="margin: 50px 30px">
            防治方案：
            <input type="text" v-model="eventPrecept" />
          </p>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="up(eventId)"
          style="margin-right: 240px; margin-bottom: 50px"
          >修 改</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";

export default {
  data() {
    return {
      pageNo: "",
      pages: "",
      eventId: "",
      eventName: "",
      eventDay: "",
      eventImg: "",
      eventStage: "",
      eventDescribe: "",
      eventFind: "",
      regionName: "",
      className: "",
      eventType: "",
      eventArea: "",
      eventAdvice: "",
      eventLose: "",
      eventPrecept: "",
      startDate: "",
      endDate: "",
      regionBean: "",
      consultBeanList: "",
      consultResult: "",
      eventList: [],
      ClassList:"",
      imageUrl: "",
      dialogVisible: false,
      dialog: false,
      dia: false,
    };
  },
  computed: {
    ...mapState("eve", ["cutObj", "param"]),
  },
  methods: {
    ...mapMutations("eve", ["setParam"]),
    ...mapActions("eve", ["findByItem"]),

    handleChange(index) {
      console.log(`当前页: ${index}`);
      this.pageNo = index;
      console.log("页码" + this.pageNo);
      this.cut(this.pageNo);
    },
    get() {
      
      let paramObj = this.param;
      paramObj.eventName = this.eventName;
      paramObj.eventStage = this.eventStage;
      paramObj.regionName = this.regionName;
      paramObj.startDate = this.startDate;
      paramObj.endDate = this.endDate;

      // 把最新的信息装入 store中的 param对象中
      this.setParam(paramObj);
      this.findByItem();
    },
    cut(pageNo) {
      let paramObj = this.param;
      paramObj.pageNo = pageNo;
      this.setParam(paramObj);
      this.findByItem();
    },
    async geteventById(eventId) {
      let paramobj = { eventId: eventId };

      let eventObj = await this.ajax.getSubmit(
        "/api/event/findEvent",
        paramobj
      );
      console.log(eventObj);

      this.eventList = eventObj;

      this.className = eventObj.className


      this.consultBeanList = this.eventList.consultBeanList



      console.log(this.consultBeanList)

      this.dialogVisible = true;
    },

    handleCurrentChange(val) {
      this.currentRow = val;
      console.val;
    },
    handleTableRow(row) {
      console.log(row.eventId);

      this.eventId = row.eventId;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    addevent() {
      this.dialog = true;
    },
    async testUpload(item) {
      let info = await this.ajax.uploadSubmit("/api/up/upload", {
        file: item.file,
      });
      console.log(info);
      this.imageUrl = "/api/img/" + info;

      this.eventImg = "/img/" + info;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    async add() {
      console.log(this.eventImg);
      let eventobj = {
        eventName: this.eventName,
        eventDay: this.eventDay,
        eventImg: this.eventImg,
        eventStage: this.eventStage,
        eventDescribe: this.eventDescribe,
        eventFind: this.eventFind,
        regionName: this.regionName,
        className: this.className,
        eventType: this.eventType,
        eventArea: this.eventArea,
        eventLose: this.eventLose,
        eventPrecept: this.eventPrecept,
      };

      let Obj = await this.ajax.getSubmit("/api/event/addEvent", eventobj);

      console.log(Obj);

      if (Obj != null) {
        alert("添加成功");
      }

      this.dialog = false;

      this.findByItem;
    },
    async update(eventId) {
      let paramobj = { eventId: eventId };

      let eventObj = await this.ajax.getSubmit(
        "/api/event/findEvent",
        paramobj
      );
      console.log(eventObj.eventStage);

      if (
        (eventObj != null && eventObj.eventStage === "防治中") ||
        eventObj.eventStage === "已得到控制"
      ) {
        let paramobj = {
          eventId: eventId,
          eventStage: (this.eventStage = "无法解决，申请专家会商"),
        };
        let updateObj = await this.ajax.getSubmit(
          "/api/event/updateEventStage",
          paramobj
        );
        console.log(updateObj);

        alert("申请专家会审成功");

        this.findByItem();
      } else {
        alert("已经在在专家会商的状态");
      }
    },
    async updatemsg(eventId) {
      let paramobj = { eventId: eventId };

      let eventObj = await this.ajax.getSubmit(
        "/api/event/findEvent",
        paramobj
      );
      console.log(eventObj);

      this.eventList = eventObj;

      this.dia = true;
    },
    async up(eventId) {
      let paramobj = {
        eventId: eventId,
        eventStage: this.eventStage,
        eventPrecept: this.eventPrecept,
      };
      let updateObj = await this.ajax.getSubmit(
        "/api/event/updateEvent",
        paramobj
      );
      console.log(updateObj);
      if (updateObj != null) {
        alert("修改成功");
      }
      this.dia = false;

      this.findByItem();
    },
      async showClassName() {
      this.ClassList = await this.ajax.getSubmit("/api/cls/findAllCls");
    },
  },
  created() {
    this.findByItem();
    this.showClassName();
  },
};
</script>

<style>
.check {
  display: flex;
}
.check > div:first-child {
  width: 450px;
  height: 200px;
}

.check > div:nth-child(2) {
  width: 300px;
  height: 200px;
}
</style>